<template>
  <div>
    <MainTwoColumn>
      <template #left>
        <div class="left-wrapper">
          <el-button type="primary" @click="addGroup_fn">添加群</el-button>
          <el-button type="success">添加好友</el-button>
        </div>
        <MailPane :isGroup="true">
          <template #title>群聊</template>
        </MailPane>
      </template>
      <template #right> </template>
    </MainTwoColumn>
    <!-- 添加群对话框 -->
    <add-group></add-group>
    <!-- 添加好友对话框 -->
    <add-friend></add-friend>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {},
  methods: {
    // 打开添加群对话框
    addGroup_fn() {
      this.$store.commit("dialog/setAddGroupDialog_fn", true);
    },
  },
  components: {
    MainTwoColumn: () => import("../../components/MainTwoColumn.vue"),
    AddGroup: () => import("./MailList/AddGroup.vue"),
    AddFriend: () => import("./MailList/AddFriend.vue"),
    MailPane: () => import("./MailList/MailPane.vue"),
  },
};
</script>
<style lang="less" scoped>
.left-wrapper {
  line-height: 80px;
  border-bottom: 1px solid #ccc;
  text-align: center;
}
</style>